import * as React from 'react'
import { Route, Switch, useHistory } from 'react-router-dom'
import { BottomNavigation, BottomNavigationAction } from '@material-ui/core'
import {
  AccessibilityNew as PlayerIcon,
  AccessibleForward as CarIcon,
  Rowing as WeaponIcon,
  SportsKabaddi as OnlineIcon,
} from '@material-ui/icons'
import CssBaseline from '@material-ui/core/CssBaseline'

import { routes } from './route'

export const Layout: React.FC = () => {
  const history = useHistory()

  return (
    <div>
      <CssBaseline />
      <div style={{ paddingBottom: 64 }}>
        <Switch>
          {routes.map((it) => {
            return <Route {...it} />
          })}
        </Switch>
      </div>
      <div style={{ position: 'fixed', bottom: 0, left: 0, right: 0 }}>
        <BottomNavigation
          onChange={(_, v) => {
            history.push(v)
          }}
          showLabels
        >
          <BottomNavigationAction
            value="/pages/player"
            label="人物"
            icon={<PlayerIcon />}
          />
          <BottomNavigationAction label="载具" icon={<CarIcon />} />
          <BottomNavigationAction label="枪械" icon={<WeaponIcon />} />
          <BottomNavigationAction label="线上" icon={<OnlineIcon />} />
        </BottomNavigation>
      </div>
    </div>
  )
}
